<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            function fn(user){
                return user.name + 'is' + user.gender
            }

            const user =  {
                name:"firely",
                gender:"male"
            }

            const element1 = <h1>{fn(user)}</h1>

            const element2 = (
                <h2>
                    {user.name} is {user.gender}
                </h2>
            )

            const element3  = <h3> {3+4} </h3>

            const ele = (
                <div>
                <div>{element1}</div>
                <div>{element2}</div>
                <div>{element3}</div>
                </div>
            )

            function renderFn(ele){
                return ele;
            }

            ReactDOM.render(renderFn(ele),document.getElementById("root"))
        </script>
    </body>
</html>